<template>
    <div>
        <div style="width: 100%;display: flex;justify-content: center;">
          <div style="width: 1200px;">
            <div>
                <div style="display: flex;align-items: center;border-bottom: 1px solid #e6e6e6;padding: 20px 0;margin-top: 10px;">
                    <div style="height: 16px;width: 8px;background-color:#256aff;border-radius: 5px;margin-right: 10px;"></div>
                    <el-breadcrumb :separator-icon="ArrowRight">
                      <!-- <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item> -->
                      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                      <el-breadcrumb-item>新闻动态</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
        <div style="display:flex;justify-content: center;flex-direction: column;font-size:26px;align-items: center;margin-top: 50px;">
          <span style="text-align: center;font-weight: bold;color:#363636">新闻动态</span>
          <span style="font-size:16px;color:#c8c8c8">News & Updates</span>
        </div>
        <div style="margin-top: 50px;">
        <div style="display: flex;justify-content: space-between;padding: 30px 0;border-bottom: 1px solid #f2f2f2;" v-for="(item,index) in newsList">
          <div class="news" :style="{'backgroundImage':'url('+baseURL_dev+item.newsImageUrl+')'}"></div>
          <div style="height: 160px;flex: 1;margin-left: 30px;">
            <div style="display: flex;justify-content: space-between;align-items: center;">
              <div style="display: flex;flex-direction: column;justify-content: space-between;height: 160px;width: 100%;">
                <div style="font-weight: bold;font-size: 16px;">
                  {{ item.newsTitle }}
                </div>
                <div style="color: #b5b5b5;margin-top:20px;font-size: 12px;">
                  {{item.newsTitleVice}}
                </div>
                <div style="font-size: 12px;color: #b5b5b5;display: flex;justify-content: space-between;">
                    <div style="display: flex;align-items: center;">
                        <el-icon><Clock /></el-icon><span style="margin-left: 10px;">{{ item.createTime }}</span>
                    </div>
                    <div>
                        <el-icon><User /></el-icon><span style="margin-left: 10px;">Admin</span>
                    </div>
                    <div>
                        <el-button type="primary" @click="toNewsDetail(item)">查看更多</el-button>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- <div style="display: flex;justify-content: space-between;padding: 30px 0;border-bottom: 1px solid #f2f2f2;">
          <div style="height: 160px;width: 30%;background-image: url(../../img/News1.png);background-size: cover;"></div>
          <div style="height: 160px;flex: 1;margin-left: 30px;">
            <div style="display: flex;justify-content: space-between;align-items: center;">
              <div style="display: flex;flex-direction: column;justify-content: space-between;height: 160px;">
                <div style="font-weight: bold;font-size: 16px;">
                  新闻标题
                </div>
                <div style="color: #b5b5b5;margin-top:20px;font-size: 12px;">
                  标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
                  标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
                </div>
                <div style="font-size: 12px;color: #b5b5b5;display: flex;justify-content: space-between;">
                    <div style="display: flex;align-items: center;">
                        <el-icon><Clock /></el-icon><span style="margin-left: 10px;">2024/07/01 16:33:33</span>
                    </div>
                    <div>
                        <el-icon><User /></el-icon><span style="margin-left: 10px;">Admin</span>
                    </div>
                    <div>
                        <el-button type="primary">查看更多</el-button>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style="display: flex;justify-content: space-between;padding: 30px 0;border-bottom: 1px solid #f2f2f2;">
          <div style="height: 160px;width: 30%;background-image: url(../../img/News1.png);background-size: cover;"></div>
          <div style="height: 160px;flex: 1;margin-left: 30px;">
            <div style="display: flex;justify-content: space-between;align-items: center;">
              <div style="display: flex;flex-direction: column;justify-content: space-between;height: 160px;">
                <div style="font-weight: bold;font-size: 16px;">
                  新闻标题
                </div>
                <div style="color: #b5b5b5;margin-top:20px;font-size: 12px;">
                  标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
                  标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
                </div>
                <div style="font-size: 12px;color: #b5b5b5;display: flex;justify-content: space-between;">
                    <div style="display: flex;align-items: center;">
                        <el-icon><Clock /></el-icon><span style="margin-left: 10px;">2024/07/01 16:33:33</span>
                    </div>
                    <div>
                        <el-icon><User /></el-icon><span style="margin-left: 10px;">Admin</span>
                    </div>
                    <div>
                        <el-button type="primary">查看更多</el-button>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div> -->

        </div>
            </div>
          </div>
        </div>
        <div style="margin-top: 100px;"></div>
      <div style="width: 100%;">
          <Foot />
      </div>
    </div>
</template>

<script setup lang="ts">
import Foot from './foot.vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { onMounted,ref,watch } from 'vue'
import { useRouter, useRoute } from "vue-router";
import { $NewsList } from '../api/api'
import { baseURL_dev } from '../config/baseUrl'
onMounted(()=>{
  loadNewsList()
})

let newsList = ref([])

const loadNewsList = async ()=>{
    let ret = await $NewsList()
    console.log(ret)
    newsList.value = ret.rows
    console.log('newsList',newsList.value)
  }

const router = useRouter();

const toNewsDetail = async(item) => {
    router.push('/newsDetail?item='+JSON.stringify(item))
    // router.push('/caseDetail?item='+JSON.stringify(item))
}
</script>

<style scoped>
.news{
  height: 160px;
  width: 30%;
  background-size: 100% 100%;
}
</style>